<!doctype html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>

<body>


    <div class="min-vh-100  p-2 bg-body-tertiary d-flex flex-column align-items-center justify-content-center">
        <h2>图书管理系统登录</h2>
        <!-- <p class="text-secondary">基于bootstrap5设计的后台管理模板系统</p> -->
        <form action="login-html.php" method="post" id="form" class="form" style="width: 380px;max-width: 100%">

            <div class="mb-3">
                <div class="input-group">
                    <span class="input-group-text bg-white "><i class="bi bi-person"></i></span>
                    <input type="text" class="form-control" placeholder="请输入用户" name="username" id="username"
                        aria-label="username">
                </div>
            </div>

            <div class="mb-3">
                <div class="input-group bsa-show_hide_password">
                    <span class="input-group-text bg-white"><i class="bi bi-person-lock"></i></span>
                    <input type="password" class="form-control" placeholder="请输入密码" name="password" autocomplete="off"
                        id="password" aria-label="password">
                    <span class="input-group-text bg-white bsa-cursor-pointer"><i class="bi bi-eye-slash"></i></span>
                </div>
            </div>

            <!-- <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text bg-white"><i class="bi bi-shield-lock"></i></span>
                <input type="text" class="form-control" id="captcha" name="captcha" aria-label="captcha"
                       placeholder="请输入验证码" style="min-width: 80px">
                <img src="../dist/img/captcha.gif" alt="验证码"
                     class="bsa-cursor-pointer" style="height: 38px;width: 120px"/>
            </div>
        </div> -->

            <div class="mb-3 d-flex align-items-center justify-content-between flex-wrap gap-3 ">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1" name="remember" value="1">
                    <label class="form-check-label" for="exampleCheck1">十天内免登录</label>
                </div>
                <a href="javascript:" class="link-success text-decoration-none">忘记密码?</a>
            </div>

            <div class="d-grid gap-2">
                <button class="btn btn-outline-success" type="submit"><i
                        class="bi bi-box-arrow-in-right"></i> 登入</button>
            </div>
        </form>
    </div>


    <script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/formvalidation/js/formValidation.js"></script>
    <script src="../lib/formvalidation/js/framework/bootstrap.js"></script>
    <script src="../lib/formvalidation/js/language/zh_CN.js"></script>
    <script src="../dist/js/bootstrap-admin.min.js"></script>
    <script src="../dist/js/app.js"></script>
    <!-- <script src="../dist/js/login.js"></script> -->
    <!--假数据模拟,生产环境中请直接删除该js-->
    <!-- <script src="../dist/js/bootstrap-admin.mock.js"></script> -->

    <script>

        $(function () {

            //前端表单验证
            $('#form').formValidation({
                fields: {
                    username: {
                        validators: {
                            notEmpty: true,
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: true,
                        }
                    },
                    captcha: {
                        validators: {
                            notEmpty: true,
                        }
                    }
                }
            }).on('success.form.fv', function (e) {
            //     //阻止表单提交
            //     // e.preventDefault();

            //     //得到表单对象
                let $form = $(e.target);
            //     //获取数据
                let data = $form.serialize();

            //     // var username = document.getElementById("username").value;  //读取表单数据，创建变量
            //     // var password = document.getElementById("password").value;

            //     // if (username == "admin" && password == "123456") {
            //     //     //验证变量。此处设置账号、密码（可设置多组，用||隔开）
            //     //     // alert("登录成功！");
            //     //     session =$form;
            //     //     window.document.f.actio="./index.html";  //此处设置登录后跳转页面
            //     //     window.document.f.submit();
            //     // }
            //     // else {
            //     //     alert("用户名或密码错误！");
            //     // }
            //     //发起ajax请求
            //     // $.ajax({
            //     //     method: 'post',
            //     //     url: '/login',
            //     //     //表单数据
            //     //     data: data,
            //     // }).then(response => {
            //     //     if (response.code === 200) {

            //     //         $.toasts({
            //     //             type: 'success',
            //     //             content: '登录成功',
            //     //             onHidden: function () {
            //     //                 top.location.replace('/index.html');
            //     //             }
            //     //         })
            //     //     }
            //     // });
             });


        })


    </script>

</body>

</html>